<template>
	<view class="cardstyle">
		<view class="titlebox">
			<view class="imgbox" v-if="!isTop">
				<image :src="showImage"></image>
			</view>
			<view class="titletext">
				<text>{{title}}</text>
			</view>
		</view>
		<view class="tipsbox">
			<text style="color: #f00;" v-if="isTop">置顶</text>
			<text>{{ author }}</text>
			<text>{{ comments }}评</text>
			<view style="flex: 1; display: flex; justify-content: flex-end;">
				<text>{{ time }}</text>
			</view>
		</view>
		<slot name="tips"></slot> 
	</view>
</template>

<script>
	export default {
		name: "cardviewtext",
		data() {
			return {
				defaultPic: "/static/logo.png" 
			};
		},
		computed: {
			
			showImage() {
				return this.images[0] || this.defaultPic;
			}
		},
		props: {
			title: {
				type: String,
				default: "新闻标题",
				require: true
			},
			isTop: {
				type: Boolean,
				default: false,
				require: true
			},
			author: {
				type: String,
				default: "来源",
				require: true
			},
			comments: {
				type: Number,
				default: 0,
				require: true
			},
			time: {
				type: String,
				default: "2025.1.1"
			},
			images: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style>
.cardstyle {
	background-color: aliceblue;
	margin: 10rpx;
	padding: 20rpx;
	border-radius: 10rpx;
	border: 1px solid #eee; 
}


.titlebox {
	display: flex;
	align-items: flex-start; 
	gap: 16rpx; 
	margin-bottom: 12px;
}


.imgbox {
	width: 160rpx; 
	height: 120rpx; 
	flex-shrink: 0; 
}
.imgbox image {
	width: 100%;
	height: 100%;
	border-radius: 6rpx; 
	object-fit: cover; 
}


.titletext {
	flex: 1; 
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
	word-wrap: break-word; 
}


.tipsbox {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	color: #999;
	gap: 16rpx;
	margin-bottom: 10rpx; 
}
</style>